<template lang="html">
  <div class="group join-list" v-if="list">
    <div class="group-head" v-if="showHead">
      <span class="group-title">
        直接参与可快速成团
      </span>
      <span class="group-more" @click="clickShowPtJoin">
        查看更多
        <img  class="max" src="/static/pingtuan/goods/details_icon_arrows@2x.png">
      </span>
    </div>
    <div class="group-main">
      <ul v-if="list.pt_list && list.pt_list.length > 0">
        <li v-for="item in list.pt_list">
          <div class="user-info">
            <div class="user-avatar">
              <img class="max" :src="item.user_headimgurl">
            </div>
            <div class="user-name">
              {{ item.user_nickname }}
            </div>
          </div>

          <div class="btn-join" @click="clickShowPtState(item)">
            去参团
          </div>

          <div class="state-info">
            <div class="state-differ">
              还差 <span>{{ item.surplus_number }}人</span>成团
            </div>
            <div class="state-end">
              距结束
              <span class="date-nums date-pt-list">
                <countdown :time="new Date(item.end_time) - new Date()">
                  <template slot-scope="props">
                    <span v-html="CountdownTime(props)"></span>
                  </template>
                </countdown>
              </span>
            </div>
          </div>
        </li>
      </ul>
      <div v-else class="no-data">
        暂无可加入的团
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['showHead', 'list'],

  methods: {
    clickShowPtJoin() {
      this.$emit('clickShowPtJoin', true)
    },
    clickShowPtState(item) {
      this.$emit('clickShowPtState', true, item)
    }
  }
}
</script>

<style lang="scss" scoped>
$MainColor: #FF4858;
.no-data{
  text-align: center;
  color: #888;
  padding: .3rem 0;
}

.join-list{
  li{
    overflow: hidden;
    margin-top: .4rem;
    .user-info{
      float: left;
      .user-avatar{
        width: 1.2rem;
        height: 1.2rem;
        background-color: $MainColor;
        border-radius: 50%;
        float: left;
        img{
          border-radius: 50%;
        }
      }
      .user-name{
        float: left;
        font-size: .42rem;
        line-height: 1.2rem;
        margin-left: .2rem;
      }
    }
    .state-info{
      float: right;
      text-align: center;
      .state-differ{
        font-size: .42rem;
        color: #333333;
      }
      span{
        color: $MainColor
      }
    }
    .btn-join{
      float: right;
      background-color: $MainColor;
      color: #fff;
      text-align: center;
      border-radius: .5rem;
      padding: .15rem .3rem;
      display: inline-block;
      margin-top: .1rem;
      margin-left: .2rem;
    }
  }
  li:nth-child(1){
    margin-top: 0;
  }
}
</style>
